<template>
  <div>
    <div>
      <!-- 订单类型筛选 -->
      <el-select 
        v-model="searchMode" 
        placeholder="请选择订单类型" 
        style="width: 150px; margin-right: 10px"
      >
        <el-option 
          v-for="item in ['已支付', '已发货', '已收货']" 
          :key="item" 
          :value="item" 
          :label="item"
        />
      </el-select>

      <!-- 搜索输入框（移除 .native 修饰符） -->
      <el-input 
        v-model="searchText" 
        @keyup.enter="load" 
        style="width: 200px"
      >
        <!-- 插槽改用 # 语法 -->
        <template #prefix>
          <i class="el-input__icon el-icon-a-042"></i>
        </template>
      </el-input>

      <!-- 重置按钮 -->
      <el-button 
        @click="reset" 
        type="warning" 
        style="margin: 10px"
      >
        <i class="el-icon-a-031"></i>
        重置
      </el-button>

      <!-- 搜索按钮 -->
      <el-button 
        @click="load" 
        type="primary" 
        style="margin: 10px"
      >
        <i class="el-icon-a-042"></i>
        搜索
      </el-button>
    </div>

    <!-- 订单列表表格 -->
    <el-table 
      :data="tableData" 
      border 
      stripe 
      style="width: 100%"
    >
      <el-table-column 
        prop="id" 
        label="ID" 
        width="50" 
        sortable
      />
      <el-table-column 
        prop="orderNo" 
        label="订单编号" 
        width="200"
      />
      <el-table-column 
        prop="totalPrice" 
        label="总价" 
        width="100"
      />
      <el-table-column 
        prop="userId" 
        label="下单人id" 
        width="100"
      />
      <el-table-column 
        prop="linkUser" 
        label="联系人" 
        width="150"
      />
      <el-table-column 
        prop="linkPhone" 
        label="联系电话"
      />
      <el-table-column 
        prop="linkAddress" 
        label="送货地址" 
        width="300"
      />
      <el-table-column 
        prop="state" 
        label="状态" 
        width="100"
      >
        <!-- slot-scope 改为 #default 语法 -->
        <template #default="scope">
          <el-tag 
            type="success" 
            v-if="scope.row.state === '已支付'"
          >
            {{ scope.row.state }}
          </el-tag>
          <el-tag 
            type="primary" 
            v-if="scope.row.state === '已发货'"
          >
            {{ scope.row.state }}
          </el-tag>
          <el-tag 
            type="info" 
            v-if="scope.row.state === '已收货'"
          >
            {{ scope.row.state }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        prop="createTime" 
        label="下单时间"
      />
      <el-table-column 
        fixed="right" 
        label="操作" 
        width="250"
      >
        <!-- slot-scope 改为 #default 语法 -->
        <template #default="scope">
          <el-button 
            type="primary" 
            style="font-size: 15px;" 
            @click="showDetail(scope.row)"
          >
            <i class="el-icon-a-042"></i>
            详情
          </el-button>

          <!-- 发货确认弹窗（slot 改用 # 语法） -->
          <el-popconfirm 
            @confirm="delivery(scope.row)" 
            title="确定发货吗？" 
            v-if="scope.row.state === '已支付'"
          >
            <template #reference>
              <el-button 
                type="primary" 
                style="font-size: 15px; margin-left: 10px;"
              >
                <i class="el-icon-a-07"></i>
                发货
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div style="margin-top: 10px">
      <el-pagination 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="pageNum" 
        :page-size="pageSize" 
        :page-sizes="[3, 5, 8, 10]" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total"
      />
    </div>

    <!-- 详情弹窗（.sync 改为手动监听事件） -->
    <el-dialog 
      :visible="dialogFormVisible" 
      @update:visible="val => dialogFormVisible = val"
    >
      <el-table 
        :data="detail" 
        background-color="black"
      >
        <el-table-column 
          label="图片" 
          width="150"
        >
          <!-- slot-scope 改为 #default 语法 -->
          <template #default="scope">
            <img 
              :src="baseApi + scope.row.img" 
              min-width="100" 
              height="100"
            />
          </template>
        </el-table-column>
        <el-table-column 
          prop="goodId" 
          label="商品id"
        />
        <el-table-column 
          prop="goodName" 
          label="商品名称"
        />
        <el-table-column 
          prop="standard" 
          label="商品规格"
        />
        <el-table-column 
          prop="price" 
          label="单价"
        />
        <el-table-column 
          prop="discount" 
          label="折扣"
        />
        <el-table-column 
          label="实价"
        >
          <!-- slot-scope 改为 #default 语法 -->
          <template #default="scope">
            {{ scope.row.price * scope.row.discount }}
          </template>
        </el-table-column>
        <el-table-column 
          prop="count" 
          label="数量"
        />
        <el-table-column 
          label="总价"
        >
          <!-- slot-scope 改为 #default 语法 -->
          <template #default="scope">
            {{ scope.row.price * scope.row.discount * scope.row.count }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import API from '../../utils/request' 
const url = '/api/order/'

export default {
  // 组件名改为多单词（符合 vue/multi-word-component-names 规则）
  name: 'OrderManage', 
  data() {
    return {
      searchMode: '',
      searchText: '',
      tableData: [],
      pageNum: 1,
      pageSize: 8,
      total: 0,
      dialogFormVisible: false,
      detail: [],
      baseApi: this.$store.state.baseApi
    }
  },
  created() {
    this.load()
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    reset() {
      this.searchMode = ''
      this.searchText = ''
      this.load()
    },
    load() {
      API.get(url + '/page', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          orderNo: this.searchText,
          state: this.searchMode
        }
      }).then(res => {
        this.tableData = res.data.records || []
        this.total = res.data.total
      })
    },
    showDetail(row) {
      // 注意：原代码中 this.request 未定义，这里假设和 API 是同一实例，需根据实际调整
      API.get('/api/order/orderNo/' + row.orderNo).then(res => { 
        if (res.code === '200') {
          this.detail = [res.data] 
          this.dialogFormVisible = true
        }
      })
    },
    delivery(order) {
      // 注意：原代码中 this.request 未定义，这里假设和 API 是同一实例，需根据实际调整
      API.get('/api/order/delivery/' + order.orderNo).then(res => { 
        if (res.code === '200') {
          this.$message.success('成功发货')
          order.state = '已发货'
        }
      })
    }
  }
}
</script>

<style scoped>
</style>